<template>
  <div class="list-wrapper">
    <!-- <el-text type="primary" style="margin-right: 8px"
      >已选{{ planningStore.selectedStaffs.length }}人:</el-text
    > -->
    <el-tag
      v-for="(item, index) in planningStore.selectedStaffs"
      :key="item.id"
      type="success"
      closable
      :disable-transitions="false"
      @close="handleRemoveStaff(index)"
      >{{ item.name }}</el-tag
    >
  </div>
</template>

<script setup>
import usePlanningStore from "@/stores/planningStore.js";

const planningStore = usePlanningStore();

const handleRemoveStaff = (index) => {
  planningStore.selectedStaffIds.splice(index, 1);
};
</script>

<style scoped>
.list-wrapper {
  width: 240px;
  border: 1px solid #8888;
  border-radius: 8px;
  padding: 4px;
  height: 240px;
  overflow: auto;
}

.el-tag {
  margin: 4px;
}
</style>
